/* eslint-disable no-trailing-spaces */
import React from 'react';
import { Tabs, List, WhiteSpace } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import _ from 'lodash';
import moment from 'moment';
import Container from '../components/Base/Container';
import ReactEcharts from '../components/Base/Echarts';
import FilterControl from '../components/Base/FilterControl';
import styles from './VipsStatPage.css';
import StatSGC from './statSGC';

const TabPane = Tabs.TabPane;
const ListItem = List.Item;


class VipsStat extends React.Component {

  onClickHandle = (vipLevelName) => {
    const { shopId, branchNo, salemanId } = this.props.currentUser;

    function getVipType(type) {
      switch (type) {
        case '核心会员':
          return 'A';
        case '忠诚会员':
          return 'B';
        case '普通会员':
          return 'C';
        case '低效会员':
          return 'D';
        default:
      }
    }
    const vip_level = getVipType(vipLevelName);
    const pathname = '/vips';
    let filter = { vip_level, shopId, branch_no: branchNo, saleman_id: salemanId };
    filter = JSON.stringify(filter);
    this.props.dispatch(routerRedux.push({ pathname, query: { filter } }));
  }

  getOption = () => {
    const onClickHandle = this.onClickHandle;
    const onEvents = {
      click(params) {
        onClickHandle(params.name);
      },
    };

    if (!this.props.rfm) return null;
    const currentSize = this.props.rfm.currentSize;
    const totalSize = currentSize.A + currentSize.B + currentSize.C + currentSize.D;
    const data = [
      { value: _.round(currentSize.A / totalSize * 100, 2), name: '核心会员' },
      { value: _.round(currentSize.B / totalSize * 100, 2), name: '忠诚会员' },
      { value: _.round(currentSize.C / totalSize * 100, 2), name: '普通会员' },
      {
        value: 100 - (_.round(currentSize.A / totalSize * 100, 2) +
        _.round(currentSize.B / totalSize * 100, 2) +
        _.round(currentSize.C / totalSize * 100, 2)),
        name: '低效会员',
      },
    ];
    const option = {
      color: ['#ffc000', '#8abe60', '#6aa7da', '#d9d9d9'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%',
      },
      legend: {
      },
      series: [
        {
          name: '会员',
          type: 'pie',
          radius: '50%',
          center: ['50%', '60%'],
          data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            normal: {
              // position: 'inside',
              formatter: '{b} \n {d}%',
            },

          },
        },
      ],
    };
    return (
      <ReactEcharts
        option={option}
        className="react_for_echarts"
        onEvents={onEvents}
      />
    );
  };
  getOption2 = () => {
    const statVipInc = this.props.statVipInc;
    if (!statVipInc) return null;
    const titles = [];
    const data = [];
    statVipInc.forEach((v) => {
      titles.push(v._id.substr(2, 5));
      data.push(v.count);
    });

    const option = {
      title: {
        // text: '会员增长趋势',
      },
      color: ['#6aa7da'],
      tooltip: {
        trigger: 'axis',
        formatter: '{b0} <br/> <span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(101,166,205)"></span>{a0}: {c0}人  ',
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40,
      },
      legend: {
        // data: ['增速', '销量'],
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        data: titles,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // margin:0
        },
        // show:false,

      }],
      yAxis: [{
        type: 'value',
        min: 0,
        position: 'left',
        // splitLine: {show: false},
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
         // margin:0,
         //  showMinLabel:false
        },
      }],
      series: [{
        name: '会员数',
        type: 'line',
        stack: '总量',
        label: {
          normal: {
            show: false,
            position: 'top',
          },
        },
        lineStyle: {
          normal: {
            color: "#6aa7da",
            width: 1.5,
            //shadowColor: 'rgba(0,0,0,0.4)',
            //shadowBlur: 10,
            //shadowOffsetY: 10,
          },
        },
        areaStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgb(228,240,250)', // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(228,240,250,0.1)', // 100% 处的颜色
              }],
              globalCoord: false, // 缺省为 false
            },
          },
        },
        data,
      }],
    };

    return (
      <ReactEcharts
        option={option}
        className="react_for_echarts"
      />
    );
  };
  getOption3 = () => {
    if (!this.props.statSaleLast30) return null;
    const data = this.props.statSaleLast30;
    /* let d1 = [1,10,15,15,20],
      d3 = [2,20,25,30,15],
      d4 = [3,5,9,10,33];*/
    let d1 = [],
      d3 = [],
      d4 = [];
    data.forEach((d) => {
      d1.push(d.md);
      d4.push(d.avg_price);
      d3.push(d.sale_count);
    });
    // d1 = d1.reverse();
    // d3 = d3.reverse();
    // d4 = d4.reverse();
    const option = {
      title: {
        // text: '',
      },
      color: ['#6aa7da', '#ffc000'],
      tooltip: {
        trigger: 'axis',
        formatter: '客单价： {c1}元 <br/> 客单量：{c0}单',
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40,
      },
      legend: {
        data: ['贡献', '客单价', '客单量'],
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        data: d1,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      }],
      yAxis: [{
        type: 'value',
        min: 0,
        position: 'left',
        // splitLine: {show: false},
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // margin:0,
          // showMinLabel:false
        },
      }],
      series: [
        {
          name: '客单量',
          type: 'line',
          label: {
            normal: {
              show: false,
            },
          },
          lineStyle: {
            normal: {
              width: 1.5,

              /*shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 5,
              shadowOffsetY: 5,*/
            },
          },
          data: d3,
        },
        {
          name: '客单价',
          type: 'line',
          label: {
            normal: {
              show: false,
            },
          },
          lineStyle: {
            normal: {
              width: 1.5,
              /*shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 5,
              shadowOffsetY: 5,*/
            },
          },
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgb(228,240,250)', // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(228,240,250,0.1)', // 100% 处的颜色
                }],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          data: d4,
        },
      ],
    };

    return (
      <ReactEcharts
        option={option}
      />
    );
  };

  getOption31 = () => {
    if (!this.props.statSaleLast30) return null;
    const data = this.props.statSaleLast30;
    let d1 = [],
      d2 = [];
    /* let d1 = [1,10,15,15,20],
      d2 = [2,20,25,30,15];*/

    data.forEach((d) => {
      d1.push(d.md);
      d2.push(_.floor((d.sale_money / 10000), 2));
    });
    // d1 = d1.reverse();
    // d2 = d2.reverse();
    const option = {
      title: {
        // text: '',
      },
      color: ['#6aa7da'],
      tooltip: {
        trigger: 'axis',
        formatter: '{b} <br/>{a}:  {c}万元',
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40,
      },
      legend: {
        data: ['销售额'],
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        data: d1,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // margin:0
        },
      }],
      yAxis: [{
        type: 'value',
        min: 0,
        position: 'left',
        // splitLine: {show: false},
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // margin:0,
          // showMinLabel:false
        },
      }],
      series: [
        {
          name: '销售额',
          type: 'line',
          label: {
            normal: {
              show: false,
            },
          },
          lineStyle: {
            normal: {
              color: "#6aa7da",
              width: 1.5,
              //shadowColor: 'rgba(0,0,0,0.4)',
              //shadowBlur: 10,
              //shadowOffsetY: 10,
            },
          },
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgb(228,240,250)', // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(228,240,250,0.1)', // 100% 处的颜色
                }],
                globalCoord: false, // 缺省为 false
              },
            },
          },
          data: d2,
        },
      ],
    };

    return (
      <ReactEcharts
        option={option}
      />
    );
  };


  // 店铺会员贡献
  getOption4 = () => {
    let { statBranchSale } = this.props;
    if (!statBranchSale) return null;
    const titles = [],
      cur = [],
      prev = [];
    if(this.props.roles.includes('manager')){
      statBranchSale=statBranchSale.filter(item=>item.branch===this.props.currentUser.branchName);
    }
    statBranchSale.forEach((v) => {
      titles.push(v.branch);
      cur.push(v.cur);
      prev.push(v.prev);
    });

    const xAxisLabel = () => {
      if (statBranchSale && statBranchSale.length > 5) {
        return false;
      } else if (statBranchSale && statBranchSale.length <= 5) {
        return true;
      }
    };

    const option = {
      color: ['#6aa7da', '#ffc000'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        // position: [10, 10],
        confine: true,
      },
      legend: {
        data: ['上月', '本月'],
      },
      grid: {
        left: 10,
        right: 10,
        bottom: 20,
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: false,
          },
          data: titles,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: xAxisLabel(),
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          // splitLine: {show: false},
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // margin:0,
          },
        },
      ],
      series: [
        {
          name: '上月',
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'top',
            },
          },
          data: prev,
        },
        {
          name: '本月',
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'top',
            },
          },
          data: cur,
        },
      ],
    };
    return (
      <ReactEcharts
        option={option}
      />
    );
  };
  getOption4List = () => {
    let data = this.props.statBranchSale;
    if (!data) return null;
    if(this.props.roles.includes('manager')){
      data=data.filter(item=>item.branch===this.props.currentUser.branchName);
    }
    return data.map((item, index) => {
      return (
        <ListItem
          key={`stat-branch-${index}`}
          onClick={() => {
          }}
        >
          <div className={styles.header}>
            <span className={styles.header_item}>{item.branch}</span>
            <span className={styles.header_span}>{item.cur}</span>
            <span
              className={styles.header_span}
              style={{ color: item.diff < 0 ? 'red' : 'green', fontWeight: 'bold' }}
            >{item.diff || '-'}</span>
            <span className={styles.header_span}>{item.per}%</span>
          </div>
        </ListItem>
      );
    });
  };


  getOption5List = () => {
    const data = this.props.statBrandRank;
    if (!data) return null;
    const total = _.reduce(data, (sum, n) => {
      return sum + n.total_money;
    }, 0);
    const list = data.map((item) => {
      return {
        ...item,
        per: _.round(item.total_money / total * 100),
        total_money: _.round(item.total_money / 10000, 2),
      };
    });
    return (
      list.map((item) => {
        return (
          <ListItem
            key={Math.random()}
            onClick={() => {
            }}
          >
            <div className={styles.header}>
              <span className={styles.header_item}>{item._id}</span>
              <span className={styles.header_span}>{item.total_money}</span>
              <span className={styles.header_span}>{item.per}%</span>
            </div>
          </ListItem>
        );
      })
    );
  };
  getOption5 = () => {
    const data = this.props.statBrandRank;
    if (!data) return null;
    let d1 = [],
      d2 = [];
    data.forEach((d) => {
      d1.push(d._id);
      d2.push(_.round(d.total_money / 10000, 2));
    });
    d1 = d1.reverse();
    d2 = d2.reverse();
    const option = {
      color: ['#6aa7da', '#ffc000'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40,
      },
      yAxis: [
        {
          type: 'category',
          data: d1,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      xAxis: [
        {
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '上月',
          type: 'bar',
          label: {
            normal: {
              show: false,
              position: 'inside',
            },
          },
          data: d2,
        },
      ],
    };
    return (
      <ReactEcharts
        option={option}
      />
    );
  };

  getValue = (a, b) => {
    const value = parseInt(a, 10) - parseInt(b, 10);
    return value > 0 ? `+${value}` : value;
  };
  getValueColor = (a, b) => {
    const value = parseInt(a, 10) - parseInt(b, 10);
    return value > 0 ? 'green' : 'red';
  };

  filterControlsChange=(v) => {
    let branchId=v[0]!=='全部'?v[0]:undefined;
    {
      const startDate = moment(v[1]).subtract(1, 'years').format('YYYY-MM-DD');
      const endDate = moment(v[1]).endOf('month').format('YYYY-MM-DD');
      this.props.dispatch({ type: 'stat/fetchStatVipInc', payload: { startDate, endDate, branchId } });
    }

    // 会员结构，日期无效
    // this.props.dispatch({ type: 'stat/rfm', payload: {branchId:v[0]} });

    {
      // 近30天销售曲线，日期无效
      this.props.dispatch({
        type: 'stat/fetchStatSaleLast30',
        payload: { branchId },
      });
    }

    /* if(this.props.stat.branchPickerValue[0]!==v[0]){
     }*/

    // 各店铺会员贡献，分店、日期都无效
    /* {
     const startDate = moment(v[1]).format('YYYY-MM-DD');
     const endDate = moment(v[1]).endOf('month').format('YYYY-MM-DD');
     console.log(startDate,endDate)
     this.props.dispatch({
     type: 'stat/fetchStatBranchSale',
     payload: {
     startDate,
     endDate,
     },
     });
     }*/

    {
      const startDate = moment(v[1]).startOf('month').format('YYYY-MM-DD');
      const endDate = moment(v[1]).add(1, 'months').startOf('month').format('YYYY-MM-DD');
      this.props.dispatch({
        type: 'stat/fetchStatBrandRank',
        payload: {
          branchId,
          startDate,
          endDate,
        },
      });
    }
  }
  componentDidMount() {
    const { roles } = this.props;
    let { branchPickerValue } = this.props.stat;
    branchPickerValue = branchPickerValue.length ? branchPickerValue : ['全部', moment().format('YYYY-MM')];

    this.props.dispatch({
      type: 'stat/fetchStatBranchSale',
      payload: {
        startDate: moment().startOf('month').format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
      },
    });
    this.props.dispatch({ type: 'stat/rfm', payload: {} });

    this.filterControlsChange(branchPickerValue);
  }
  renderTips1 = (currentSize, prevSize) => {
    // current
    const { A, B, C, D } = currentSize;
    const total = A + B + C + D;

    const a = A / total;
    const b = B / total;
    const c = C / total;
    const d = D / total;

    if ((a >= 0.08 && a <= 0.15) && (b >= 0.2 && b <= 0.35) && (c >= 0.2 && c <= 0.35) && (d >= 0.1 && d <= 0.2)) {
      return <span>会员结构合理，请继续加油哦</span>;
    } else if (a < 0.08 && b < 0.2) {
      return <span>核心/忠诚会员占比过低</span>;
    } else if (a < 0.08) {
      return <span>会员结构异常，核心会员占比过低</span>;
    } else if (b < 0.2) {
      return <span>会员结构异常，忠诚会员占比过低</span>;
    }
  };

  renderTips2 = (currentSize, prevSize) => {
    // current
    const { A, B, C, D } = currentSize;
    const total = A + B + C + D;

    const a = A / total;
    const b = B / total;
    const c = C / total;
    const d = D / total;

    // prev
    let A2 = prevSize.A,
      B2 = prevSize.B,
      C2 = prevSize.C,
      D2 = prevSize.D;

    const pa = (A - A2) / A2;

    if (pa >= -0.2 && pa <= -0.1) {
      return <span>核心/忠诚会员轻微流失，保持关注</span>;
    } else if (pa <= -0.2) {
      return <span>核心/忠诚会员流失较严重，需及时回访跟进</span>;
    }
  };


  renderTips3 = (currentSize, prevSize) => {
    // current
    const { A, B, C, D } = currentSize;
    const total = A + B + C + D;
    const d = D / total;


    if (d >= 0.5) {
      return <span>低效会员占比过大，建议通过促销活动提高活跃度</span>;
    }
  }

  render() {
    if (!this.props.rfm) return null;
    const { currentSize, prevSize } = this.props.rfm;
    const { shopId, branchNo } = this.props.currentUser;

    return (
      <Container title="会员指标">
        <div>
          <Tabs defaultActiveKey="1" swipeable={false}>
            <TabPane tab="会员数量" key="1">
              <div>
                <FilterControl filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch} hidePickerDate={false} />
                <List renderHeader={() => '会员增长趋势'}>
                  <ListItem>
                    {this.getOption2()}
                  </ListItem>
                </List>
                <List renderHeader={() =>  `会员结构（${moment().format('YYYY-MM')}）`}>
                  <ListItem>
                    {this.getOption()}
                    <div>
                      <div style={{ whiteSpace: "pre-wrap", textAlign: "center", fontSize: "0.25rem", color: 'gray' }}>核心会员（高于10%，越高越好） 忠诚会员(20%-30%)</div>
                      <div style={{ whiteSpace: "pre-wrap", textAlign: "center", fontSize: "0.25rem", color: 'gray' }}>普通会员(40%-50%) 低效会员(低于20%，越低越好)</div>
                    </div>
                  </ListItem>
                </List>

                <List
                  renderHeader={() =>
                    <div className={styles.header}>
                      <span className={styles.header_item}>会员类型</span>
                      <span className={styles.header_span}>总人数</span>
                      <span className={styles.header_span}>变化</span>
                    </div>}
                >
                  <ListItem
                    onClick={() => {
                      this.onClickHandle('核心会员');
                    }}
                  >
                    <div className={styles.header}>
                      <span className={styles.header_item}>核心会员</span>
                      <span className={styles.header_span}>{currentSize.A}</span>
                      <span
                        className={styles.header_span}
                        style={{ color: this.getValueColor(currentSize.A, prevSize.A), fontWeight: 'bold' }}
                      >
                        {this.getValue(currentSize.A, prevSize.A)}
                      </span>
                    </div>
                  </ListItem>
                  <ListItem
                    onClick={() => {
                      this.onClickHandle('忠诚会员');
                    }}
                  >
                    <div className={styles.header}>
                      <span className={styles.header_item}>忠诚会员</span>
                      <span className={styles.header_span}>{currentSize.B}</span>
                      <span
                        className={styles.header_span}
                        style={{ color: this.getValueColor(currentSize.B, prevSize.B), fontWeight: 'bold' }}
                      >
                        {this.getValue(currentSize.B, prevSize.B)}
                      </span>
                    </div>
                  </ListItem>
                  <ListItem
                    onClick={() => {
                      this.onClickHandle('普通会员');
                    }}
                  >
                    <div className={styles.header}>
                      <span className={styles.header_item}>普通会员</span>
                      <span className={styles.header_span}>{currentSize.C}</span>
                      <span
                        className={styles.header_span}
                        style={{ color: this.getValueColor(currentSize.C, prevSize.C), fontWeight: 'bold' }}
                      >
                        {this.getValue(currentSize.C, prevSize.C)}
                      </span>
                    </div>

                  </ListItem>
                  <ListItem
                    onClick={() => {
                      this.onClickHandle('低效会员');
                    }}
                  >
                    <div className={styles.header}>
                      <span className={styles.header_item}>低效会员</span>
                      <span className={styles.header_span}>{currentSize.D}</span>
                      <span
                        className={styles.header_span}
                        style={{ color: this.getValueColor(currentSize.D, prevSize.D), fontWeight: 'bold' }}
                      >
                        {this.getValue(currentSize.D, prevSize.D)}
                      </span>
                    </div>
                  </ListItem>
                </List>
                <List renderHeader={() => '现状分析'}>
                  <ListItem>
                    <p style={{ lineHeight: '30px' }}>
                      { this.renderTips1(currentSize, prevSize)}
                      { this.renderTips2(currentSize, prevSize)}
                      { this.renderTips3(currentSize, prevSize)}
                    </p>
                  </ListItem>
                </List>
              </div>
            </TabPane>
            <TabPane tab="销售收入" key="2">
              <div>
                <FilterControl filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch} hidePickerDate />
                <List
                  renderHeader={() => '近30天销售曲线'}
                >
                  <ListItem>
                    {this.getOption3()}
                    {this.getOption31()}
                  </ListItem>
                </List>
                <List
                  renderHeader={() => `各店铺会员贡献(万)`}
                >
                  <ListItem>
                    {this.getOption4()}
                  </ListItem>
                </List>
                <List
                  renderHeader={() =>
                    <div className={styles.header}>
                      <span className={styles.header_item}>店铺</span>
                      <span className={styles.header_span}>贡献/万</span>
                      <span className={styles.header_span}>变化</span>
                      <span className={styles.header_span}>占比</span>
                    </div>}
                >
                  {this.getOption4List()}
                </List>
                <WhiteSpace size="xl" />
                <FilterControl filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch} hidePickerDate={false} />
                <List
                  renderHeader={() => '品牌贡献TOP10(万)'}
                >
                  <ListItem>
                    {this.getOption5()}
                  </ListItem>
                </List>
                <List
                  renderHeader={() =>
                    <div className={styles.header}>
                      <span className={styles.header_item}>品牌</span>
                      <span className={styles.header_span}>贡献/万</span>
                      <span className={styles.header_span}>占比</span>
                    </div>}
                >{this.getOption5List()}</List>
              </div>

            </TabPane>
            {shopId == "sixun_000032" && 
            <TabPane tab="单客贡献" key="3">
              <FilterControl filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch} hidePickerDate={true} />
              <StatSGC shopId={shopId} branchNo={this.props.stat.branchPickerValue} />
            </TabPane>
            }
          </Tabs>
        </div>
      </Container>
    );
  }
}

export default connect((state, props) => {
  return {
    rfm: state.stat.rfm,
    statSaleLast30: state.stat.statSaleLast30,
    statBrandRank: state.stat.statBrandRank,
    statBranchSale: state.stat.statBranchSale,
    statVipInc: state.stat.statVipInc,
    currentUser: state.auth.currentUser,
    roles: state.auth.currentUser.roles,
    stat: state.stat,
  };
})(VipsStat);
